<template>
<vs-modal :show.sync="show" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{$t('common.detail')}}</h4>
  </div>  
  <div class="modal-body" slot="modal-body">
    <validator name="form">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.username')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.username" :disabled="cfg._id > 0" v-validate:username="{required: true, maxlength: 30}">
            <strong class="my-error text-danger" v-if="$form.username.required">{{$t('error.required')}}</strong>
            <strong class="my-error text-danger" v-if="$form.username.maxlength">{{$t('error.tooLong')}}</strong>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-8">
            <div class="checkbox">
              <label>
                <input type="checkbox" v-model="showPassword"> {{$t('common.showPassword')}}
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{passwordTitle}}</label>
          <div class="col-sm-8">
            <input :type="passwordInputType" class="form-control" v-model="password" v-validate:password="{strong: true}">
            <strong class="my-error text-danger" v-if="$form.password.strong">{{$t('error.passwordNotStrong')}}</strong>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.role')}}</label>
          <div class="col-sm-8">
            <select class="form-control" v-model="cfg.role" :disabled="cfg._id > 0">
              <option v-for="option in roleOptions" :value="option.value">{{option.text}}</option>
            </select>
          </div>
        </div>      
      </form>  
    </validator>
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
    <button type="button" class="btn btn-primary" @click.prevent="onSaveChanges">{{$t('common.savechanges')}}</button>
  </div>    
</vs-modal>  
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import locales from '../locales/authUser.js'
import {printObj, copyObj} from 'libs/utils.js'
import * as actions from 'share/server/vuex/actions/system.js'
import {http} from 'share/server/api.js'
import {List} from '../configs/authRole.js'
import {encryptPassword} from 'share/server/utils.js'

export default {
  locales,
  vuex: {
    getters: {
      username: (state) => state.auth.username
    },
    actions
  },
  computed: {
    passwordInputType () {
      if (this.showPassword) {
        return 'text'
      } else {
        return 'password'
      }
    },
    passwordTitle () {
      if (this.cfg._id > 0) {
        return this.$t('list.newPassword')
      } else {
        return this.$t('list.password')
      }
    }
  },
  data () {
    return {
      show: false,
      showPassword: false,
      password: '',
      roleOptions: new List(this),
      cfg: {
        _id: -1,
        isBuildIn: 0,
        enable: 0,
        privilege: 2,
        authBy: 'password',
        role: 'webUser',
        username: '',
        password: '',
        maxNumOfConn: 1,
        secPolicyEnable: 1   
      }
    }
  },
  methods: {
    onQuit () {
      this.show = false
    },
    onAdd () {
      this.cfg.password = encryptPassword(this.password)

      if (this.username === 'root') {
        this.cfg.enable = 1
      }

      http('/api/auth/users', 'PUT', this.cfg).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          this.doLoadUsers()
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))
    },
    onChangePassword () {
      http(`/api/auth/users/${this.cfg._id}/changePassword`, 'POST', {
        password: encryptPassword(this.password)
      }).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          this.doLoadUsers()
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))      
    },
    onSaveChanges () {
      if (this.$form.invalid) {
        toast.w(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }

      if (this.cfg._id > 0) {
        this.onChangePassword()
      } else {
        this.onAdd()
      }
      this.show = false
    },
    onShow (val) {
      copyObj(this.cfg, val)
      this.password = ''
      this.show = true
    }
  },
  ready () {
    ebus.on('show-user-detail', this.onShow)
  }
}
</script>

<style>
</style>